<%--
  Created by IntelliJ IDEA.
  User: Mr_C
  Date: 2017/3/18
  Time: 15:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/views/common/taglib.jsp"%>
<%@include file="/WEB-INF/views/common/js.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>测试图片标记</title>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300' rel='stylesheet' type='text/css'>

    <!-- Animate.css -->
    <link rel="stylesheet" href="${ctx}/css/mainpage/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="${ctx}/css/mainpage/icomoon.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="${ctx}/css/mainpage/bootstrap.css">
    <!-- Superfish -->
    <link rel="stylesheet" href="${ctx}/css/mainpage/superfish.css">

    <link rel="stylesheet" href="${ctx}/css/mainpage/style.css">
    <link rel="stylesheet" href="${ctx}/css/tabstyle/style.css">

    <script src="${ctx}/js/tabstyle/jquery.js"></script>
    <script src="${ctx}/js/tabstyle/index.js"></script>


    <!-- Modernizr JS -->
    <script src="${ctx}/js/mainpage/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="${ctx}/js/mainpage/respond.min.js"></script>

    <![endif]-->

    <script language="javascript">
        $(document).ready(function() {
            //加载系统模板
            $.ajax({
                url: '${ctx}/guide/getAllMainPicture',
                type: 'POST',
                data:{
                },
                dataType: 'json',
                success: function(responseText) {

                    //循环加载主图片
                    for (var i = 0; i < responseText.TotalRecordCount; i++) {

                        if (i == 0) {
                            $("#tabslist").append("<li class=\"tabBlock-tab is-active\" onclick=\"getPositionById('"+responseText.Records[i].main_picture_id+"','"+responseText.Records[i].loc+"')\" >"+responseText.Records[i].picture_name+"</li>");
                        } else {
                            $("#tabslist").append("<li class=\"tabBlock-tab\" onclick=\"getPositionById('"+responseText.Records[i].main_picture_id+"','"+responseText.Records[i].loc+"')\">"+responseText.Records[i].picture_name+"</li>");
                        }

                        //添加tab下的panel
                        $("#tabcontent").append("<div class=\"tabBlock-pane\" id=\"taboflist"+responseText.Records[i].main_picture_id+"\"></div>");

                    }

                    //加载第一张图片的诊室坐标点
                    getPositionById(responseText.Records[0].main_picture_id, responseText.Records[0].loc);
                }
            });
        });
    </script>

    <script language="javascript">
        function openMapBox(office_id){
            $("#officedetail").empty();
            $("#officedetail").append("<iframe src='${ctx}/office/preOfficeDetail?office_id="+office_id+"' id=\"myiframe\" scrolling=\"yes\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>");
        }

        var prePictureId=0
        function getPositionById(picture_id, picture_loc){
            //用以清空上一次点击的栏
            if(prePictureId != 0){
                $("#taboflist"+prePictureId).empty()
            }
            prePictureId = picture_id;

            $("#taboflist"+picture_id).append("<div id='imgcontainer"+picture_id+"'></div>");
            $("#imgcontainer"+picture_id).append("<div id='map"+picture_id+"'></div>");
            $("#map"+picture_id).append("<img id='imageid"+picture_id+"' src='${vtx}"+picture_loc+"' style='text-align:center' />");
            $.ajax({
                url: '${ctx}/guide/getPositionwithID',
                type: 'POST',
                data:{
                    picture_id:picture_id
                },
                dataType: 'json',
                success: function(responseText) {
                    var imgId ='#imageid'+picture_id;
                    var currentWidth = $(imgId).width();
                    var currentHeight = $(imgId).height();

                    for (var i = 0; i < responseText.TotalRecordCount; i++) {
                        var maincontainer = "#maincontainer";
                        var x = $(imgId).offset().left+responseText.Records[i].x*currentWidth;
                        var y = $(imgId).offset().top+responseText.Records[i].y*currentHeight-$(maincontainer).offset().top;
                        $("#imgcontainer"+picture_id).append("<div class='markone' id='"+i+"' style='left:"+x+"px; top:"+y+"px' data-toggle=\"modal\" data-target=\"#myModal\" onclick='openMapBox("+responseText.Records[i].office_id+")'><img src='${ctx}/images/mark.png' style= 'height: 30px; width:30px'; /></div>");
//                        $("#imgcontainer"+picture_id).append("<img src='/images/mark.png' class='mark' id='"+i+"' style='left:"+x+"px; top:"+y+"px' data-toggle=\"modal\" data-target=\"#myModal\" onclick='openMapBox("+responseText.Records[i].office_id+")'></img>");
                    }
                }
            });
        }
    </script>


    <style type="text/css">
        /*#imgcontainer{*/
        /*text-align:center;*/
        /*}*/
        /*#map{*/
        /*text-align:center;*/
        /*}*/
        .markone{
            position:absolute;
        }
    </style>

</head>

<body>

<div id="fh5co-wrapper">
    <div id="fh5co-page">
        <div id="fh5co-header">
            <div class="top">
                <div class="container">
                    <span> <a href="#"><i>@</i> 关注Santiago新浪微博</a></span>
                    <span> <a href="tel://+4008517517"><i class="icon-mobile3"></i> 4008 517 517</a></span>
                </div>
            </div>
            <!-- end:top -->
            <header id="fh5co-header-section">
                <div class="container">
                    <div class="nav-header">
                        <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
                        <h1 id="fh5co-logo"><a href="${ctx}/user/AfteruserLogin">圣地亚哥宠物医院</a></h1>
                        <!-- START #fh5co-menu-wrap -->
                        <nav id="fh5co-menu-wrap" role="navigation">
                            <ul class="sf-menu" id="fh5co-primary-menu">
                                <li>
                                    <a href="${ctx}/user/AfteruserLogin">Home</a>
                                </li>
                                <li class="active">
                                    <a href="${ctx}/guide/pre3DGuide" class="fh5co-sub-down">3D导览</a>
                                    <ul class="fh5co-sub-menu">
                                        <li><a href="${ctx}/guide/pre3DGuide">3D模型导览</a></li>
                                        <li><a href="${ctx}/guide/preimageGuide">图片导览</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="${ctx}/cosplay/preViewCosplay" class="fh5co-sub-down">职能学习</a>
                                    <ul class="fh5co-sub-menu">
                                        <li><a href="${ctx}/cosplay/preViewCosplay">角色扮演</a></li>
                                        <li><a href="${ctx}/office/preViewOffice">科室详情</a></li>
                                        <li><a href="${ctx}/case/preViewCase">病例学习</a></li>
                                    </ul>
                                </li>
                                <li><a href="${ctx}/user/userLogOut">退出</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>

        </div>


        <div class="fh5co-hero">
            <div class="fh5co-overlay"></div>
            <div class="fh5co-cover text-center" style="background-image: url(${ctx}/images/mainpage/main.jpg);">
                <div class="desc animate-box" id="maincontainer">
                    <h2>图片导览模块</h2>
                    <div class="container">
                        <figure class="tabBlock">
                            <div class="row">
                                <%--存放tab的标签--%>
                                <ul class="tabBlock-tabs" id="tabslist">
                                </ul>
                                    <%--存放tab的panel--%>
                                    <div class="tabBlock-content" id="tabcontent">
                                    </div>
                            </div>
                        </figure>
                    </div>
                </div>
            </div>
        </div>

        <!-- fh5co-blog-section -->
        <footer>
            <div id="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <p>Copyright C1G19 Santiago Pet Hospital.All RIGHTS RESERVED. <br>Any Question Please contact 4008-517-517</p>
                        </div>
                        <div class="col-md-6">
                            <ul class="footer-menu">
                                <li><a href="${ctx}/user/AfteruserLogin">Home</a></li>
                                <li><a href="${ctx}/guide/pre3DGuide">3D导览</a></li>
                                <li><a href="${ctx}/cosplay/preViewCosplay">职能学习</a></li>
                                <li><a href="${ctx}/user/userLogOut">退出</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- Modal模态框，用以加载病例详细信息 -->
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">科室详情</h4>
                </div>
                <div class="modal-body" id="officedetail">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- END fh5co-page -->

</div>
<!-- END fh5co-wrapper -->

<!-- jQuery -->
<script src="${ctx}/js/mainpage/jquery.min.js"></script>

<!-- jQuery Easing -->
<script src="${ctx}/js/mainpage/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="${ctx}/js/mainpage/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="${ctx}/js/mainpage/jquery.waypoints.min.js"></script>
<!-- Superfish -->
<script src="${ctx}/js/mainpage/hoverIntent.js"></script>
<script src="${ctx}/js/mainpage/superfish.js"></script>

<!-- Main JS (Do not remove) -->
<script src="${ctx}/js/mainpage/main.js"></script>


</body>
</html>
